<template>
  <div class="settingHeader">
    <!--头部的顶端-->
    <div class="header-top">
      <span class="header-topLeft">
        <span>Explore</span>
        <span>Start a project</span>
      </span>
      <span class="header-center">{{centerText}}</span>
      <span class="header-topRight">
        <span>Search</span>
        <span></span>
      </span>
      <!--头部的底部-->
      <div class="header-bottom">
        <span class="header-bottomTitle">Settings</span>
        <ul>
          <span class="marking" :style="leftNumx[num]"></span>
          <li v-for="(item,key) in liList" :key="key" @click="activeCli(key)">
            {{item}}
          </li>
        </ul>
      </div>
    </div>
  </div>

</template>
<script>
    export default {
        name: "setting-header",
        data() {
            return{
              liList:[ 'Account', 'Edit pofile', 'Notifications', 'Payment methods', 'Following' ],
              leftNumx:[
                'left:0;transition:left 1s',
                'left:120.6px;transition:left 1s',
                'left:241.2px;transition:left 1s',
                'left:361.8px;transition:left 1s',
                'left:482px;transition:left 1s'
              ],
            };
        },
      props:[ 'num', 'centerText' ],
      methods:{
        activeCli(key){
          if(key == 0){
            this.$router.push({path:'/setingAccountKickstarer'});
          }
          if(key == 1){
            this.$router.push({path:'/settingEditProfile'});
          }
          if(key == 2){
            this.$router.push({path:'/settingNotificationsKickstarter'});
          }
          if(key == 3){
            this.$router.push({path:'/settingPaymentMethods'});
          }
          if(key == 4){
            this.$router.push({path:'/settingFollowing'});
          }

        }
      },
    }
</script>

<style scoped lang="scss">
  .settingHeader{
    padding: 0;
    margin: 0;
    overflow: hidden;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0,0,0,0.15);
  }
  /*头部的顶端*/
  .header-top{
    line-height: 80px;
    span{display: inline-block;}
    .header-topLeft{
      width: 25%;
      text-align: left;
      padding-left: 43px;
      box-sizing: border-box;
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #2E2E2E;
      letter-spacing: 0.2px;
      span:nth-child(1){margin-right:12px;}
    }
    .header-center{
      width: 50%;
      text-align: center;
      font-family: Phosphate-Solid;
      font-size: 24px;
      color: #2E2E2E;
    }
    .header-topRight{
      width: 25%;
      text-align: right;
      padding-right:29px;
      box-sizing: border-box;
      span:nth-child(1){
        vertical-align: middle;
        margin-right: 52px;
      }
      span:nth-child(2){
        margin-right: 52px;
        border: 1px dashed #000000;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        vertical-align: middle;
      }
    }
  }
/*头部的底部*/
  .header-bottom{
    width: 100vw;
    height: 224px;
    padding: 59px 0 0 220px;
    box-sizing: border-box;
    /*border-top: 1px solid #2e2e2e;*/
    .header-bottomTitle{
      font-family: PingFangSC-Medium;
      font-size: 48px;
      color: #2E2E2E;
      letter-spacing: 0.69px;
      margin-bottom: 46px;
    }
    ul{
      padding: 0;
      margin: 0;
      height: 20px;
      line-height: 20px;
      position: relative;
      width: 603px;
    li{
      display: inline-block;
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #7F809B;
      letter-spacing: 0.2px;
      line-height: 20px;
      width: 120.6px;
      text-align: center;
    }
    }
  }
   .marking{
    display: inline-block;
    position: absolute;
     background: #2C59F6;
    z-index: 1000;
    width: 120.6px;
    height: 4px;
    bottom: -27px;
    font-size: 14px;
    letter-spacing: 0.2px;
    border-radius: 2px;
    left: -120.6px;
  }
  .leftOne{left: 0px;transition: left 1s;}
  .leftTwo{left: 120.6px;transition: left 1s;}
  .leftThree{left: 241.2px;transition: left 1s;}
  .leftFour{left: 361.8px;transition: left 1s;}
  .leftFive{left: 482px;transition: left 1s;}
</style>
